import { useState } from 'react';
import { Modal, Button } from 'antd'
import './Modalsee.css'
function Modalsee(propos) {
    //查看
    // console.log(propos);
    const [isModalVisible, setIsModalVisible] = useState(false);

    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    // 模态框title
    const CustomTitle = () => {
        return (
            <div className='CustomTitle_title'>
                查看
            </div>
        )
    }
    return (
        <div>

            <a onClick={showModal}>查看</a>
            <Modal cancelText='返回' okText='确认' width="715px" title={<CustomTitle ></CustomTitle>} visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} footer={[<Button id="ModalseeS3Btn1" key="back" onClick={handleCancel}>返回</Button>]}>
                <div className="Modalsee">
                    <div className="Modalsee_c1">
                        <p>健康值</p>
                        <p>表现</p>
                        <p>报告</p>
                        <p>状态</p>
                    </div>
                    <div className="Modalsee_c2">
                        <p>{propos.content.Numerical_range}</p>
                        <p>{propos.content.performance}</p>
                        <div className="Modalsee_c2_c1">
                        {propos.content.report}
                        </div>
                        <p>{propos.content.state}</p>
                    </div>
                </div>
            </Modal>
        </div>
    )
}
export default Modalsee